<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="author" content="张强">
    <title></title>
    <script src="jquery-3.0.0.js"></script>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        a{
            text-decoration: none;
        }
        ul{
            list-style: outside none none;
        }
        .slider,
        .slider-panel img,
        .slider-extra{
            width: 650px;
            height: 413px;
        }
        .slider{
            text-align: center;
            margin: 30px auto;
            position: relative;
        }
        .slider-panel,
        .slider-nav,
        .slider-pre,
        .slider-next {
            position: absolute;
            z-index: 8;
        }
        .slider-panel{
            position: absolute;
        }
        .slider-panel img{
            border: none;
        }
        .slider-extra {
            position: relative;
        }
        .slider-nav {
            margin-left: -51px;
            position: absolute;
            left: 50%;
            bottom: 4px;
        }
        .slider-nav li {
            background: #3e3e3e;
            border-radius: 50%;
            color: #fff;
            cursor: pointer;
            margin: 0 2px;
            overflow: hidden;
            text-align: center;
            display: inline-block;
            height: 20px;
            line-height: 18px;
            width: 20px;
            opacity: 0.8;
        }
        .slider-nav .slider-item-selected {
            background: blue;
        }
        .slider-page a {
            background: rgba(0, 0, 0, 0.2);
            /*filter: progid: DXImageTransform.Microsoft.gradient(startColorstr=#33000000, endColorstr=#33000000);*/
            color: #fff;
            text-align: center;
            display: block;
            font-family: "simsun";
            font-size: 22px;
            width: 28px;
            height: 62px;
            line-height: 62px;
            margin-top: -31px;
            position: absolute;
            top: 50%;
        }
        
        .slider-page a:HOVER {
            background: rgba(0, 0, 0, 0.4);
            /*filter: progid: DXImageTransform.Microsoft.gradient(startColorstr=#66000000, endColorstr=#66000000);*/
        }
        
        .slider-next {
            left: 100%;
            margin-left: -28px;
        }
    </style>
</head>

<body>
    <div class="slider">
        <ul class="slider-main">
            <li class="slider-panel">
                <a href="" target="_blank"><img alt="" title="" src="1.jpg"></a>
            </li>
            <li class="slider-panel">
                <a href="" target="_blank"><img alt="" title="" src="2.jpg"></a>
            </li>
            <li class="slider-panel">
                <a href="" target="_blank"><img alt="" title="" src="3.jpg"></a>
            </li>
            <li class="slider-panel">
                <a href="" target="_blank"><img alt="" title="" src="4.jpg"></a>
            </li>
        </ul>
        <div class="slider-extra">
            <ul class="slider-nav">
                <li class="slider-item">1</li>
                <li class="slider-item">2</li>
                <li class="slider-item">3</li>
                <li class="slider-item">4</li>
            </ul>
            <div class="slider-page">
                <a class="slider-pre" href="javascript:;;">&lt;</a>
                <a class="slider-next" href="javascript:;;">&gt;</a>
            </div>
        </div>
    </div>
    <script>
        $(document).ready(function(){console.log('ready')
            // 
            var length; 
            // 当前图片的索引，默认是第1张(索引0)
            var currentIndex = 0; 
            // 开始或者停止的标志
            var interval; 
            //  hasStarted表示是否已经开始轮播
            var hasStarted = false;
            // t表示轮播的时间间隔，3000毫秒
            var t = 3000;
            
            // 得到元素的个数 4
            length = $('.slider-panel').length;
            console.log(length);
            
            // 将除了第一张图片隐藏
            $('.slider-panel:not(:first)').hide();
            // 将第一个slider-item设为激活状态
            $('.slider-item:first').addClass('slider-item-selected');
            // 隐藏向前、向后翻按钮
            $('.slider-page').hide();
            
            // 鼠标上悬时显示向前、向后翻按钮,停止滑动，鼠标离开时隐藏向前、向后翻按钮，开始滑动
            $('.slider-panel, .slider-pre, .slider-next').hover(function(){
                stop();  // 停止播放
                $('.slider-page').show();
            }, function(){
                $('.slider-page').hide();
                start(); // 开始播放
            });
            
            // 
            $('.slider-item').hover(function(){
                stop();
                // 
                var preIndex = $('slider-item').filter('.slider-item-selected').index();
                currentIndex = $(this).index();
                play(preIndex, currentIndex);
            }, function(){
                // 
                start();
            });
            
            // 
            // $('.slider-pre').unbind('click');
            $('.slider-pre').bind('click', function(){
                // 调用向前翻页方法 
                pre();
            });
            // 
            // $('.slider-next').unbind('click');
            $('.slider-next').bind('click', function(){
                // 调用向后翻页方法
                next();
            });
            
            // 向前翻页 
            function pre(){
                var preIndex = currentIndex;
                currentIndex = (--currentIndex + length) % length;
                play(preIndex, currentIndex);
            }
            // 向后翻页
            function next(){
                var preIndex = currentIndex;
                // console.log(currentIndex);
                currentIndex = ++currentIndex % length;
                console.log(preIndex + ' ' + currentIndex);
                play(preIndex, currentIndex);
            }
            
            /**
		      * 从preIndex页翻到currentIndex页
		      * preIndex 整数，翻页的起始页
		      * currentIndex 整数，翻到的那页
		      */
            function play(preIndex, currentIndex){
                $('.slider-panel').eq(preIndex).fadeOut(500).parent().children().eq(currentIndex).fadeIn(1000);
                // 
                $('.slider-item').removeClass('slider-item-selected');
                $('.slider-item').eq(currentIndex).addClass('slider-item-selected');
            }
            
            // 开始轮播
            function start(){console.log('start')
                if(!hasStarted){
                    hasStarted = true;
                    // 每隔3000毫秒调用一次next方法
                    interval = setInterval(next, t);
                }
            }
            
            // 停止轮播
            function stop(){console.log('stop')
                clearInterval(interval);
                hasStarted = false;
            }
            
            // 
            start();
        });
        
        
    </script>
</body>

</html>